<script setup>
import ProductItem from '@/components/ProductItem.vue'

defineProps(['item'])

</script>

<template>
  <div class="home-product">
    <div class="title">
      <h3>{{ item.name }}</h3>
    </div>
    <div class="centent">
      <div class="left">
        <img v-img-lazy="item.picture" src=""></img>
      </div>
      <div class="right">
        <ul>
          <li v-for="goods in item.goods||[]">
            <ProductItem :goods="goods"></ProductItem>
          </li>
        </ul>
      </div>
      <div class="saleInfo">
        <span>{{item.saleInfo}}</span>
      </div>
    </div>


  </div>
</template>

<style scoped>
.home-product {
  .title {
    h3 {
      height: 100px;
      line-height: 100px;
    }
  }

  .centent {
    height: 540px;
    display: flex;
    gap:  50px;
    position: relative;
    .left {
      flex: 1;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .right {
      flex: 4;
      padding: 20px 0;
      ul {
        display: flex;
        gap: 20px;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        align-content: center;
        li {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }

    .saleInfo {
      height: 30px;
      position: absolute;
      left: 0;
      top: 225px;
      transform: translateY(50%);
      background-color: rgb(44, 44, 44, 0.5);
      span{
      line-height: 30px;
      color: white;
      }
    }
  }

}
</style>
